import React, {useState, useEffect} from 'react';
import {useDispatch} from 'react-redux'
import {useHistory} from 'react-router-dom'
import { Popover, NavBar, Icon } from 'antd-mobile';

const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;

const Header = ({title}) => {
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch({
      type: 'setFooterMenu',
      data: "none"
    })
    return () => {
      dispatch({
        type: 'setFooterMenu',
        data: "block"
      })
    }
  },[]);

  const [visible, setVisible] = useState(false);
  const [selected, setSelected] = useState('');

  const history = useHistory()

  const onSelect = (opt) => {
    setVisible(false);
    switch (opt.props.value) {
      case '首页':
        history.push('/home')
        break;
      case '我的':
        history.push('/more')
        break;
    
      default:
        break;
    }
    setSelected(opt.props.value)
  };
  const handleVisibleChange = (visible) => {
    setVisible(visible)
  };

  return (
      <NavBar
        mode="light"
        style={{backgroundColor:"#f7f7f7"}}
        leftContent={[
          <Icon key="0" type="left" color="#444a4d" size="lg" style={{ marginRight: '16px' }} />,
        ]}
        onLeftClick={() => history.goBack()}
        rightContent={
          <Popover
            overlayStyle={{ opacity: '0.5', zIndex: 999}}
            visible={visible}
            overlay={[
              (<Popover.Item key="4" value="首页" icon={myImg('tOtXhkIWzwotgGSeptou')} data-seed="logId">首页</Popover.Item>),
              (<Popover.Item key="5" value="我的" icon={myImg('PKAgAqZWJVNwKsAJSmXd')} style={{ whiteSpace: 'nowrap' }}>我的</Popover.Item>),,
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={handleVisibleChange}
            onSelect={onSelect}
          >
            <div style={{
              height: '100%',
              padding: '0 15px',
              marginRight: '-15px',
              display: 'flex',
              alignItems: 'center',
            }}
            >
              <Icon type="ellipsis" color="#444a4d" />
            </div>
          </Popover>
        }
      >     
        <span style={{fontWeight:"bold"}}>{title}</span>
      </NavBar>
  );
}

export default Header;
